<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
<div>
    <form action="url" method="get" name="my,form">
        账户:<input type="text" name="域自动获取焦点" autofocus/>
         <input type="submit">
        e-mail: <input type="email" name="my,email">
        URL: <input type="url" name="my,url">
        seach: <input type="search" name="my,seach">
        按钮: <input type="checkbox" name="my,checkbox">
        电话: <input type="tel" name="my,tel" list="ID_selector" placeholder="151"/>
        选择你喜欢的颜色: <input type="color" name="my,favcolor">
        数字范围: <input type="number_not-null" name="my,age" required/>
        定义date控件: <input type="date" name="my,range">
        生日（月年）：<input type="month" name="day,Month"><br>
        周: <input type="week" name="my,week"><br>
        时间： <input type="time" name="my,time"> <br>
        时间选择带pm/am: <input type="datetime-local" name="my,datetime-local"><br>
<!--        合法值选择list列表-->
        <datalist id="ID_selector"><br>
            <option value="1">1----</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </datalist>
    </form>
</div>
<div>
<!--    对多个元素进行组合 多用于照片-->
    <figure>
        <figcaption>figure标题</figcaption>
    </figure>
<!--    设置open 属性默认展示-->
    <details open>
        <summary>details折叠标题</summary>
        <p>details折叠内容</p>
        <div>
            <p>折叠内容<mark>div域的内容</mark></p>
        </div>
    </details>
    <meter value="81" max="100" min="0" low="50" high="90" optimum="100">当前进度</meter>
<!--    显示耗时函数进程javascript-->
    <progress value="80" max="100">80%</progress>

</div>
<div>
<!--    src 播放资源  autoplay 自动播放 controls 显示控件 loop 循环播放  muted 输出被静音 preload 页面加载自动预加载 poster 封面-->
    <video controls="controls" src=""></video>
    <audio controls="controls" src="">
        <source src="">
    </audio>
</div>
<!--标签-->
<div>
    <a href="../../httpCssJavaScript/html/From交互.html">超文本链接(跳转链接的作用)</a>
    <img src="../../httpCssJavaScript/image/pexels-photo-26796134.jpeg" alt="美丽的风景" width="750" height="20" title="风景比亚迪">
</div>
<!--文字-->
<div>
    <em>着重文字</em>
    <b>粗体文字</b>
    <i>斜体文字</i>
    <strong>加重语气</strong>
    <del>删除文字</del>
    <span>css配合使用</span>
</div>
<div>
<!--    自定义列表-->
    <dl>
        <dt>尚学堂</dt>
        <dd>百战程序</dd>
        <dt>京东</dt>
        <dd>阿里</dd>
    </dl>
<!--    有序列表-->
    <ol type="a">
        <li>banana</li>
        <li>eggplant</li>
        <li>watermelon</li>
        <li>grapes</li>
    </ol>
    <ol type="A">
        <li>动物
            <ol>
                <li>lion</li>
                <li>tiger</li>
                <li>elephant</li>
                <li>cat</li>
                <li>otter</li>
            </ol>
        </li>
        <li>蔬菜
            <ol>
                <li>有机蔬菜
                    <ol>
                        <li>tomato</li>
                        <li>cucumber</li>
                        <li>begonia</li>
                    </ol>
                </li>
            </ol>
        </li>
        <li>肉类</li>
    </ol>
    <ol type="I"></ol>
    <ol type="i"></ol>

</div>
<!--无序列表-->
<div>
    <ul>
        <li>无需列表</li>
        <li>没有先后顺序</li>
    </ul>
    <ul type="disc">
        <li>默认实心圆</li>
    </ul>
    <ul type="circle">
        <li>空心圆</li>
    </ul>
    <ul type="square">
        <li>小方块</li>
    </ul>
    <ul type="none">
        <li>不显示</li>
    </ul>
</div>
<div>
<!--    创建下拉选择列表-->
<select>
    <option>1</option>
</select>
</div>
<!--块元素内连元素-->
<table border="1px" width="200px" height="10px">

    <tr>
        <td><em>内联元素</em><td>
        <td>行内元素不会独占页面一行 只站自身大小</td>
        <td>行内元素设置width height属性无效</td>
        <td>一般内联元素包含元素不包含块级元素</td>
    </tr>
        <tr>
            <tr><td><em>块级元素</em></td>
            <td>块元素会在页面独占一行(自上向下垂直排列)</td>
            <td>可以设置width,height属性</td>
            <td>一般块级元素可以包含行内元素和其他块级元素</td>
        </tr>
    <tr>
        <td><em>常见块元素</em></td>
        <td> ul </td>
        <td> table </td>
        <td>  h1~h6  </td>
        <td> form </td>
        <td> p </td>
        <td> div </td>
    </tr>
    <tr>
        <td><em>常见行内块级元素(不含行 能识别宽高)</em></td>
        <td>button</td>
        <td>img</td>
        <td>input</td>
    </tr>
    <tr>
        <td><em>常见内联元素</em></td>
        <td>a</td>
        <td>b</td>
        <td>em</td>
        <td>i</td>
        <td>span</td>
        <td>strong</td>
    </tr>
    <p>块元素会在页面中独占一行,行内元素不会独占页面中的一行，只占自身的大小</p>
    <p>块元素可以设置width，height属性,行内元素设置width，height属性无效</p>
    <p>⼀般块级元素可以包含行内元素和其他块级元素,⼀般内联元素包含内联元素不包含块级元素</p>
</table>
<!--HTML5新标签-->
<div>
<header>头部</header>
    <nav>导航</nav>
    <section>定义文档的节 例如章节 页眉 页脚</section>
    <aside>侧边拦</aside>
    <footer>脚部</footer>
    <article>一个独立完整的内容</article>
</div>
<!-- ... 现有代码 ... -->
<!-- HTML5新标签 -->
<div>
    <header>头部</header>
    <nav>导航</nav>
    <section>定义文档的节 例如章节 页眉 页脚</section>
    <aside>侧边拦</aside>
    <footer>脚部</footer>
    <article>一个独立完整的内容</article>
</div>

<!-- 新增：Canvas绘制石头示例 -->
<div>
    <h3>Canvas绘制石头</h3>
    <canvas id="stoneCanvas" width="200" height="200" style="border:1px solid #ccc;"></canvas>
    <script>
        // 获取Canvas上下文
        const canvas = document.getElementById('stoneCanvas');
        const ctx = canvas.getContext('2d');

        // 创建不规则石头路径（使用贝塞尔曲线模拟自然轮廓）
        ctx.beginPath();
        ctx.moveTo(100, 40);          // 起点
        ctx.bezierCurveTo(140, 20, 180, 60, 160, 100);  // 右上曲线
        ctx.bezierCurveTo(190, 140, 150, 180, 100, 170); // 右下曲线
        ctx.bezierCurveTo(50, 180, 10, 140, 40, 100);   // 左下曲线
        ctx.bezierCurveTo(20, 60, 60, 20, 100, 40);     // 左上曲线
        ctx.closePath();

        // 创建渐变填充（模拟石头的明暗纹理）
        const gradient = ctx.createRadialGradient(80, 80, 10, 100, 100, 90);
        gradient.addColorStop(0, '#8B7D6B');  // 亮部
        gradient.addColorStop(1, '#5A4A3A');  // 暗部

        // 填充路径
        ctx.fillStyle = gradient;
        ctx.fill();
    </script>
</div>
<!-- ... 现有代码 ... -->
</body>
</html>